<template>
  <div class="pies">
    <v-chart class="chart" :option="pagetop" autoresize />
    <v-chart class="chart" :option="linetop" autoresize />
  </div>
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';
import { ref, provide, computed } from 'vue';

import { useStore } from 'vuex';

const store = useStore();

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const pagetop = computed(() => ({
  title: {
    text: '近24小时访问量TOP6',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: store.state.Past24HoursTop.page.hosts,
  },
  series: [
    {
      name: '近24小时访问量TOP6',
      type: 'pie',
      radius: '55%',
      center: ['60%', '60%'],
      data: store.state.Past24HoursTop.page.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}));


const linetop = computed(() => ({
  title: {
    text: '近24小时添加量TOP6',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: store.state.Past24HoursTop.line.hosts,
  },
  series: [
    {
      name: '近24小时添加量TOP6',
      type: 'pie',
      radius: '55%',
      center: ['60%', '60%'],
      data: store.state.Past24HoursTop.line.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}));

</script>

<style scoped lang="less">
.pies{
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  display: flex;
  margin: 1rem 1rem 0 0;

  &>.chart{
    flex-grow: 1;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    .chart{
      width: 100%;
    }
  }
  &>:nth-child(2){
    margin-left: 1rem;
  }
}

</style>
